<template>
  <div class="left-mean">
    <div class="user-info">
      <div class="pic">
        <img slot="icon" :src="userpic">
      </div>
      <div class="text">
        <h3>{{name}}</h3>
      </div>
    </div>
    <ul class="an-left-nav">
      <li :class="leftnavclass(item)" v-for="item in leftnav" @click="$emit('enlarge-text',item)">
        <x-icon type="link" size="25"></x-icon>
        <span>{{item.name}}</span>
      </li>
    </ul>
    <div class="left-floor">
      <box  gap="10px 10px">
        <x-button type="default" @click.native="submitout">退出登录</x-button>
      </box>
    </div>
  </div>
</template>

<script>
  import { Box, XButton} from 'vux'
  import { mapGetters } from 'vuex'
  import userpic from '@/assets/user_bg.jpg'
    export default {
      components: {
        Box,
        XButton
      },
      computed: {
        ...mapGetters([
          'name'
        ]),
        leftnav(){   //路由菜单
          let newmen = [];
          let rout = this.$router.options.routes;
          for(let i=0; i<rout.length; i++){
            if(rout[i].children){
              newmen.push({
                path:rout[i].children[0].path,
                name:rout[i].children[0].meta.title
              })
            }
          }
          return newmen
        }
      },
      data(){
        return{
          userpic,
        }
      },
      methods: {
        leftnavclass(v){  //菜单栏选中状态
          let classname = ''
          if(v.path == this.$route.path){
            classname = 'an-nav-li active'
          }else{
            classname = 'an-nav-li'
          }
          return classname
        },
        submitout:function () {
          this.$store.dispatch('LogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        }
      }
    }
</script>

<style lang="less">
.left-mean{
  position: relative;
  height: 100%;
  .user-info{
    display: flex;
    height: 130px;
    padding: 50px 0 0 30px;
    background: url('../assets/left_bg.jpg');
    .pic{
      width: 40px ;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      overflow: hidden;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .text{
      color: #ffffff;
      h3{
        line-height: 40px;
        font-weight: 400;
      }
    }
  }
  .an-left-nav{
    padding-top: 10px;
    .an-nav-li{
      color: #000000;
      display: flex;
      padding: 10px 15px;
      .vux-x-icon{
        margin-right: 8px;
        fill: #5f6379;
      }
      span{
        line-height: 25px;
        color: #959da5;
      }
      &.active{
        .vux-x-icon{
          fill: #ff7800;
        }
        span{
          color: #ff7800;
        }
      }
    }
  }
  .left-floor{
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    background-color: #ffffff;
  }
}
</style>
